<template>
	<view class="container">
		<view class="address">
			<view class="">
				<view class="address_view">
					<view class="address_name">高浠博</view>
					<view class="address_phone">15896871079</view>
				</view>
				<view class="address_address">河南省林州市姚村镇</view>
			</view>
			<view class="address_view">
				<view class="get">立即送出</view>
				<view class="address_time">大约10：21送达</view>
			</view>
		</view>
		<view class="order">
			<view class="order_title soild">
				<view class="shop_name">{{shopname}}</view>
				<view class="meituan">美团专送</view>
			</view>
			<view class="shop" v-for="(item,index) in list">
				<image :src="item.img" mode=""></image>
				<view class="shop_view">
					<view class="name">{{item.name}}</view>
					<view class="num">x{{item.count}}</view>
				</view>
				<view class="subtotal">￥{{item.price*item.count}}</view>
			</view>
			<view class="order_title top">
				<view class="">打包费</view>
				<view class="">￥0</view>
			</view>
			<view class="order_title top">
				<view class="">配送费</view>
				<view class="">￥0</view>
			</view>
			<view class="order_title top">
				<view class="">美团红包</view>
				<view class="">暂无</view>
			</view>
			<view class="order_title top">
				<view class="">商家代金券</view>
				<view class="">暂无</view>
			</view>
			<view class="order_title top">
				<view class="">金币</view>
				<view class="">暂无</view>
			</view>
			<view class="price">
				小计￥{{price}}
			</view>
		</view>
		<view class="pay">
			<view class="order_title top cell">
				<view class="">支付方式</view>
				<view class="">在线支付</view>
			</view>
			<view class="order_title top cell">
				<view class="">备注</view>
				<view class="">口味、偏好等要求 ></view>
			</view>
			<view class="order_title top cell">
				<view class="">餐具数量</view>
				<view class="">未选择 ></view>
			</view>
			<view class="order_title top cell">
				<view class="">发票</view>
				<view class="">未选择 ></view>
			</view>
		</view>
		<view class="submit">
			<view class="">￥{{price}}</view>
			<button type="default" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: null,
				price: null,
				shopname: "华莱士全鸡汉堡"
			}
		},
		methods: {
			submit() {
				uni.setStorageSync("list",this.list)
				uni.setStorageSync("shopname",this.shopname)
				uni.setStorageSync("price",this.price)
				uni.switchTab({
					url: '../order/order'
				})
			}
		},
		onLoad(option) {
			this.list = JSON.parse(option.list);
			this.price = option.price;
			console.log(this.list)
			console.log(this.price)
		}
	}
</script>

<style>
	page {
		background: #F4F4F4
	}
</style>

<style scoped>
	.cell {
		border-bottom: 1px solid #BABABA;
		padding-bottom: 10px;
	}

	.price {
		width: 90%;
		margin-left: 5%;
		font-size: 20px;
		border-top: 1px solid #BABABA;
		margin-top: 30px;
		text-align: right;
		padding-top: 15px;
		padding-bottom: 15px;
		color: red;
	}

	.top {
		margin-top: 15px;
	}

	/* 	.container {
		background-color: #f4f4f4;
		width: 100%;
		height: 140vh;
	} */

	.address {
		width: 95%;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		border-radius: 15px;
		padding-bottom: 10px;
		margin-top: 20px;
	}

	.pay {
		width: 95%;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		border-radius: 15px;
		padding-bottom: 10px;
		margin-top: 20px;
		margin-bottom: 50px;
		padding-top: 10px;
	}

	.address_view {
		display: flex;
		justify-content: start;
	}

	.address_name {
		font-size: 20px;
		color: gray;
		margin-left: 20px;
		margin-top: 10px;
		font-weight: 900;
	}

	.address_phone {
		font-size: 20px;
		color: gray;
		margin-left: 20px;
		margin-top: 10px;
		font-weight: 900;
	}

	.address_address {
		font-size: 16px;
		color: gray;
		margin-left: 20px;
		margin-top: 10px;
		border-bottom: 1px solid #BABABA;
		font-weight: 900;
	}

	.get {
		font-size: 16px;
		margin-left: 20px;
		margin-top: 10px;
	}

	.address_time {
		font-size: 16px;
		margin-left: 130px;
		margin-top: 10px;
		color: #007AFF;
	}

	.order {
		width: 95%;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20px;
		border-radius: 15px;
		padding-top: 15px;
	}

	.order_title {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin-left: 5%;
	}

	.shop_name {
		font-size: 18px;
		color: #909399;
	}

	.meituan {
		background-color: #ffd161;
		color: #000000;
		padding: 5px;
		border-radius: 8px;
	}

	.soild {
		border-bottom: 0.5px solid #CCCCCC;
		padding-bottom: 15px;
	}

	.shop {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin-left: 5%;
		margin-top: 15px;
		height: 100%;
	}

	.shop image {
		width: 70px;
		height: 70px;
	}

	.shop_view {
		width: 50%;
		text-align: left;
	}

	.name {
		margin-top: 5px;
	}

	.num {
		color: gray;
		margin-top: 23px;
	}

	.subtotal {
		font-size: 16px;
		margin-top: 15px;
	}

	.submit {
		display: flex;
		justify-content: space-between;
		background-color: #181818;
		position: fixed;
		bottom: 0;
		width: 100%;
		color: #FFFFFF;
		overflow: hidden;
	}

	.submit button {
		margin-right: 0px;
		width: 19%;
		background-color: #ffce5a;
		color: #000000;
	}

	.submit view {
		font-size: 20px;
		margin-left: 30px;
		margin-top: 10px;
	}
</style>
